<template>
  <div class="d-main">
    <a-row style="height: 100%">
      <a-col :span="6" class=" d-left-col">
        <a-row class=" d-left-col-top d-border">
          <div id="custom7"></div>
        </a-row>
        <a-row class=" d-left-col-bottom d-border">
          <a-col :span="12" class="d-col-height">
            <div id="custom1">
            </div>
          </a-col>
          <a-col :span="12" class="d-col-height">
            <div id="custom2">
            </div>
          </a-col>
          <a-col :span="12" class="d-col-height">
            <div id="custom3">
            </div>
          </a-col>
          <a-col :span="12" class="d-col-height">
            <div id="custom4">
            </div>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="18" class="d-right-col">
        <a-col :span="15" class="d-right-col-left">
          <Maps />
        </a-col>
        <a-col :span="9" class="d-right-col-right">
          <a-row class="d-right-col-right-top">
            <a-col :span="12" class="d-pei-left">
              <div id="custom5">
              </div>
            </a-col>
            <a-col :span="12" class="d-pei-right">
              <div id="custom6">
              </div>
            </a-col>

          </a-row>
          <a-row class="d-right-col-right-bottom ">
            <Lines />
          </a-row>
        </a-col>
      </a-col>
    </a-row>
  </div>
  <Statistics />
</template>

<script lang='ts'>
import Statistics from "@/components/Index/Statistics/Statistics.vue";
import Maps from "@/components/Index/Maps/Maps.vue";
import Lines from "@/components/Index/Lines/Lines.vue";
export default {
  name: "index",
  components: {
    Statistics,
    Maps,
    Lines,
  },
};
</script>
<style lang="less" scoped>
.border {
  border: 1px solid rgb(255, 166, 0);
}
#custom5,
#custom6 {
  height: 100%;
  width: 100%;
}
.d-main {
  background: url("../../assets/img/bg.110420cf.png") no-repeat center top;
  height: 705px;
  box-sizing: border-box;
  overflow: hidden;
  .d-left-col,
  .d-right-col {
    height: 98%;
  }
  .d-border {
    border-radius: 5px;
    margin: 14px 0 0 14px;
  }
  .d-left-col-top {
    height: 35%;
  }
  .d-left-col-bottom {
    height: 60%;
    margin-top: 20px;
    .d-col-height {
      height: 50%;
    }
    #custom1,
    #custom2,
    #custom3,
    #custom4 {
      height: 100%;
      width: 100%;
    }
  }
  .d-right-col {
    .d-right-col-left {
      margin-top: 2%;
      height: 95%;
    }
    .d-right-col-right {
      height: 100%;
      .d-right-col-right-top,
      .d-right-col-right-bottom {
        height: 50%;
      }
      .d-pei-left,
      .d-pei-right {
        height: 100%;
      }
    }
  }
}
.d-tile {
  text-align: center;
  font-size: 23px;
  font-weight: bold;
  color: white;
  padding: 20px 0;
}
#custom7 {
  height: 100%;
  width: 100%;
  div:first-child {
    width: 100% !important;
    height: 100% !important;
    canvas {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
</style>